<template>
  <div class="container">
    <div class="sbgl-nav breadcrumb">
      <img src="static/img/shu.png" alt="">
      <span>系统日志查询</span>
    </div>
    <div class="row">
      <div class="col-md-12 xtrzcx-time">
        <form id="searchForm" class="form-inline">
          <div class="form-group">
            <Date-picker v-model="logTime" format="yyyy/MM/dd" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
          </div>
            <!-- <div class="form-group">
              <Date-picker type="date" placeholder="开始时间"></Date-picker>
            </div>
            <div class="form-group">
              <Date-picker type="date" placeholder="结束时间"></Date-picker>
            </div> -->
            <div class="form-group xuanze-box">  
              <label class="" for="exampleInputEmail3">设备名称:</label>  
              <select class="form-control xuanze" name="groupid" v-model="systemLog.device">
                <option value="">所有设备</option>
                <option :value="item.deviceid" v-for="item in deviceList">{{item.devicename}}</option>
              </select>
            </div>
            <div class="form-group xuanze-box">  
              <label class="" for="exampleInputEmail3">设备ID:</label>  
              <select class="form-control xuanze" name="groupid" v-model="systemLog.device">
                <option value="">所有设备</option>
                <option :value="item.deviceid" v-for="item in deviceList">{{item.deviceid}}</option>
              </select>
            </div>
            <div class="form-group xuanze-box">  
              <label class="" for="exampleInputEmail3">日志类型:</label>  
              <select class="form-control xuanze" v-model="systemLog.logtype">
                <option value="">所有类型</option>
                <option value="信息">信息</option>
                <option value="错误">错误</option>
                <option value="警告">警告</option>
                <option value="故障">故障</option>
              </select>
            </div>          
          <button type="button" @click="loadData()" class="btn btn-default">搜索</button>
        </form>
      </div>
    </div>
    <div class="table-responsive sbzgl-tab-list">
      <table class="table table-bordered" id="tblDevice">
          <thead>
            <tr>
          <th width="5%">序号</th>
          <th width="15%">时间</th>
          <th width="12%">设备名称</th>
          <th width="13%">设备ID</th>
          <th width="12%">日志类型</th>
          <th width="8%">错误码</th>
          <th width="15%">平台名</th>
          <th width="10%">事件内容</th>
          <th width="10%">备注</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in page.list">
              <td>{{page.limit*(page.pageNum-1)+index+1}}</td>
              <td>{{item.createtime | moment('YYYY-MM-DD HH:mm')}}</td>
              <td>{{item.devicename}}</td>
              <td>{{item.deviceid}}</td>
              <td>{{item.logtype}}</td>
              <td>{{item.errorcode}}</td>
              <td>{{item.planname}}</td>
              <td>{{item.sysevent}}</td>
              <td>{{item.details}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="pull-right">
        <my-page v-bind:pageNum="page.pageNum" v-bind:totalPageNum="page.totalPageNum" v-bind:totalNum="page.totalNum" v-bind:pageData="pageData" v-bind:allList="page.allList" v-bind:limit="page.limit"></my-page>
      </div>
  </div>
</template>

<script>
  import page from '@/components/Page.vue'
  import moment from 'moment'

  export default {
    name: 'SystemLog',
    components: { 'my-page': page },
    data: function () {
      return {
        deviceList: [],
        logTime: [],
        systemLog: {
          begtime: '',
          endtime: '',
          logtype: '',
          device: ''
        },
        page: {
          list: [],
          allList: [],
          pageNum: 1,
          totalPageNum: 0,
          totalNum: 0,
          limit: 10
        }
      }
    },
    created: function () {
      this.deviceInit()
      this.loadData()
    },
    watch: {
      logTime: function (val) {
        this.systemLog.begtime = val[0]
        this.systemLog.endtime = val[1]
      }
    },
    methods: {
      loadData: function () {
        this.$http.post('/api/hedacmdreq', {method: 'LogSearch', ...this.systemLog}).then(response => {
          this.page.allList = response.data.HedaACK.Body.loglist || []
          this.page.totalNum = this.page.allList.length || 0
          this.page.totalPageNum = Math.ceil(this.page.totalNum / this.page.limit)
        })
      },
      pageData: function (showList, pageNum) {
        this.page.pageNum = pageNum
        this.page.list = showList
      },
      deviceInit: function () {
        this.$http.post('/api/hedacmdreq', {method: 'DeviceSearch', device: '', groupid: ''}).then(response => {
          var body = response.data.HedaACK.Body
          if (body.retCode === '0') {
            this.deviceList = body.devicelist
          }
        })
      }
    },
    filters: {
      moment: function (value, format) {
        format = format || 'YYYY-MM-DD HH:mm:ss'
        return moment(value).format(format)
      }
    }
  }
</script>
